<template>
  <div>
    <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" background-color="#126bae"
      text-color="#fff" active-text-color="#ffd04b" @select="handleSelect">
      <el-menu-item index="1">首页</el-menu-item>
      <el-submenu index="2">
        <template slot="title">题目市场</template>
        <el-menu-item index="2-1">提交题目</el-menu-item>
        <el-menu-item index="2-2">预览题目</el-menu-item>
        <el-menu-item index="2-3">功能3</el-menu-item>
        <el-submenu index="2-4">
          <template slot="title">选项4</template>
          <el-menu-item index="2-4-1">选项1</el-menu-item>
          <el-menu-item index="2-4-2">选项2</el-menu-item>
          <el-menu-item index="2-4-3">选项3</el-menu-item>
        </el-submenu>
      </el-submenu>
      <el-menu-item index="3">个人中心</el-menu-item>
      <el-menu-item index="4"><a href="https://www.bilibili.com/" target="_blank">哔哩哔哩</a></el-menu-item>
    </el-menu>
    <router-view></router-view>
  </div>
</template>


<script>
export default {
  name: 'App',
  components: {

  },
  data() {
    return {
      activeIndex: '1',
      activeIndex2: '1'
    };
  },
  methods: {
    //设置用户信息
    setInfo() {
      this.setCookie('name', 'admin');
    },

    //cookie永久有效
    setCookie(name, value) {

      document.cookie = name + '=' + value + ';expires=' + 'Fri, 31 Dec 9999 23:59:59 GMT'
    },

    //name 字段名   
    getCookie(name) {
      if (document.cookie.length > 0) {
        var start = document.cookie.indexOf(name + '=')
        if (start !== -1) {
          start = start + name.length + 1
          let end = document.cookie.indexOf(';', start)
          if (end === -1) end = document.cookie.length
          return unescape(document.cookie.substring(start, end))
        }
      }
      return ''
    },

    handleSelect(key, keyPath) {
      console.log(key, keyPath);
      switch (key) {
        case "1":
          this.transferPath("/home")
          break
        case "2-1":
          this.transferPath("/submit")
          break
        case "2-2":
          this.transferPath("/preview")
          break
        case "3":
          this.transferPath("/login")
          break
      }
    },

    transferPath(pathUrl) {
      this.$router.push({
        path: pathUrl
      })
    }
  },
  mounted: function () {
    console.log("加载页面");
  }

}
</script>

<style>
.box-card {
  width: 380px;
  height: 300px;
  margin-left: 20px;
  margin-top: 100px
}

.el-input {
  margin-bottom: 30px
}

.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 200px;
  min-height: 400px;
}

a {
  TEXT-DECORATION: none
}
</style>
